/* 获取nums里面的所有span元素 */
const nums = document.querySelectorAll(".nums span");
/* 获取counter元素 */
const counter = document.querySelector(".counter");
/* 获取final元素 */
const finalMessage = document.querySelector(".final");
/* 获取replay元素 */
const replay = document.querySelector("#replay");

const resetDOM = () => {
  /* 从counter元素中删除hide类样式 */
  counter.classList.remove("hide");
  /* finalMessage元素中删除show类样式 */
  finalMessage.classList.remove("show");
  /* 循环nums里面的所有span */
  nums.forEach((num) => {
    /* 将所有spa的样式为空 */
    num.classList.value = "";
  });
  /* 给第一个span添加上样式 */
  nums[0].classList.add("in");
};

const runAnimation = () => {
  nums.forEach((num, idx) => {
    /* 获取到最后一个span元素 */
    const nextToLast = nums.length - 1;
    /* 某个 CSS 动画完成时触发。 */
    num.addEventListener("animationend", (e) => {
      /* 判断动画的名称是否等于并且是不是最后一个span */
      if (e.animationName === "goIn" && idx !== nextToLast) {
        /* 进来了就是最后一个span元素 */
        /* 从当前span元素中删除in类样式 */
        num.classList.remove("in");
        /* 给当前span添加上out样式 */
        num.classList.add("out");
      } else if (e.animationName === "goOut" && num.nextElementSibling) {
        /* 判断动画的名称是否等于并且下一个元素的兄弟是否存在*/
        /* 给当前span添加上ing样式  */
        num.nextElementSibling.classList.add("in");
      } else {
        /* 给当前span添加上hide样式  */
        counter.classList.add("hide");
        /* 给当前finalMessage元素添加上show样式  */
        finalMessage.classList.add("show");
      }
    });
  });
};
runAnimation();
/* 点击事件 */
replay.addEventListener("click", () => {
  resetDOM();
  runAnimation();
});
